<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" placeholder-class="line" placeholder="请填写会员昵称" name="nickname" v-model="nickname" />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<u-upload
						ref="uUpload"
						name="avatarurl"
						:fileList="oldAvatarUrl"
						max-count="1"
						:action="action"
						upload-text="上传头像"
						:auto-upload="false"
						@on-success="uploadsuccess"
						@on-error="uploaderror"
						@on-choose-complete="chooseimg"
						:form-data="formData"
						:header="header"
					></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.value">{{ item.name }}</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<input disabled type="text" placeholder-class="line" placeholder="2021-01-24" name="birthday" v-model="birthday" />
				</view>
				<view class="item" @click="regionVisible = true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region" v-model="region" />
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false" @confirm="onConfirm($event, 'region')" ref="region"></regionPicker>
			<u-picker mode="time" ref="uPicker" v-model="birthdayShow" @confirm="birthdayConfirm" />
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
// 引入地区模块
import regionPicker from '@/components/region/w-picker.vue';
export default {
	components: { regionPicker },
	data() {
		return {
			id: '', //初始化修改数据id
			// 头像提交服务端地址
			action: this.$url + `/api/infoedit`,
			// 需要展示的图片列表比如展示需要编辑的用户头像
			oldAvatarUrl: [{ url: 'https://api.aslegou.top/uploads/tou.jpg' }],
			// 表单数据(不含头像信息)
			formData: {},
			// 初始化header头
			header: {},
			oldImg: '', //初始化旧图片
			regionVisible: false, //初始化地区选择器开关
			nickname: '鲁班', //初始化收件人姓名
			region: '北京市市辖区朝阳区', //初始化地区默认值
			birthday: '1992-02-14',
			birthdayShow: false,
			sexlist: [{ value: 1, name: '男' }, { value: 2, name: '女' }],
			sex: 1 //初始化会员性别
		};
	},

	onLoad(option) {
		let user = JSON.parse(option.params);
		this.id = user.id;
		this.nickname = user.nickname;
		this.region = user.region;
		this.birthday = user.birthday;
		this.sex = user.sex;
		this.oldAvatarUrl = [{ url: this.$url + user.avatarurl }];
		this.oldImg = user.avatarurl;
	},

	methods: {
		// 选择会员地区
		onConfirm(res) {
			this.region = res.result;
		},
		// 监听本地选择图片
		chooseimg(lists, name) {
			// console.log(lists[0]);
			// this.oldImg = lists[0].url;
		},
		// 性别标签切换
		radioGroupChange(e) {
			this.sex = e;
		},

		// 地址默认设置开关
		setDefault(e) {},

		// 开始生日选择器
		showBirthdayPicker(res) {
			this.birthdayShow = true;
		},
		// 监听时期选择器
		birthdayConfirm(e) {
			this.birthday = e.year + '-' + e.month + '-' + e.day;
		},

		// 图片上传成功触发
		uploadsuccess(data, index, lists, name) {
			// console.log(data);
			// 赋空this.$refs.uUpload.lists[0].file
			this.$refs.uUpload.lists[0].file = false;
			// 编辑成功后重置缓存中用户信息
			this.resetUserInfo(data.list.avatarurl);
		},
		// 图片上传失败触发
		uploaderror(res, index, lists, name) {
			// console.log(res);
		},
		// 编辑成功后重置缓存中用户信息
		resetUserInfo(avatarurl) {
			// 提示编辑成功
			this.$tip.tip('编辑成功！', 'success');
			// 1.获取缓存中的用户信息
			let userInfo = uni.getStorageSync('userInfo');
			// 2.修改用户的头像和昵称
			userInfo.nickname = this.nickname;
			userInfo.avatarurl = avatarurl;
			// 3.重写缓存
			uni.setStorageSync('userInfo', userInfo);
		},
		submit(e) {
			// 通过$refs调用组件的uUpload方法，即可获取组件的内容
			// console.log(this.$refs.uUpload.lists[0]);
			let user = e.detail.value;
			user.sex = this.sex;
			user.id = this.id;
			// this.action = this.$refs.uUpload.lists[0].url.slice(5);
			// user.avatarurl = this.action;

			console.log(user);
			//根据this.$refs.uUpload.lists[0].file 来判断是否有图片文件上传
			if (this.$refs.uUpload.lists[0].file) {
				//有图片文件 => 使用上传组件进行修改
				this.formData = user; //携带表单数据
				this.header = {
					authorization: uni.getStorageSync('token')
				}; //携带token
				//等到本次dom渲染完毕 再通过$refs调用uUpload的upload方法
				this.$nextTick(() => {
					this.$refs.uUpload.upload();
				});
			} else {
				//无图片文件 => 使用原生请求进行修改
				user.avatarurl = this.oldImg;
				this.$http({
					url: 'infoedit',
					method: 'post',
					data: { user }
				}).then(res => {
					console.log(res);
					// this.resetUserInfo()
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
// 引入样式
@import '@/static/css/userinfo.scss';
</style>
